const input = document.querySelector("#goodSearch");
const ul = document.querySelector(".searchResult ul");
const p = document.querySelector(".searchResult p");
const goodUrl =
  "http://cba.itlike.com/public/index.php?s=/api/goods/detail&goodsId";
let val = "";
let str = "";

//给搜索添加节流
function throttle(fn, time) {
  let timer;
  return function () {
    if (!timer) {
      timer = setTimeout(function () {
        fn();
        timer = null;
      }, time);
    }
  };
}
input.addEventListener("keyup", throttle(keyupFn, 300));

//用户输入
function keyupFn() {
  val = input.value;
  getGoodMsg(val, str);
}
//界面加载从本地存储获取最近搜索记录
const delSearchResult = document.querySelector(".delSearchResult");
const recentSearch = document.querySelector(".recentSearch");

let arrSearchVal = JSON.parse(localStorage.getItem("arrSearch")) || [];

//用户点击动态搜索显示界面跳转至详情页
ul.addEventListener("click", function (e) {
  const target = e.target;
  if (target.tagName === "A") {
    const dynamicVal = target.innerHTML.substring(0, 2);
    arrSearchVal.push(dynamicVal);
    localStorage.setItem("arrSearch", JSON.stringify(arrSearchVal));
  }
});

const rSearchCont = document.querySelector(".rSearchCont");
const rSearchContA = document.querySelectorAll(".rSearchCont a");

if (arrSearchVal.length > 0) {
  recentSearch.style.display = "block";
  let newArr = [...new Set(arrSearchVal)];

  rSearchCont.innerHTML = newArr
    .map(function (item, index) {
      return `
      <a href="#">${item}</a>
    `;
    })
    .join("");
}

//点击最近搜索商品按钮跳转至搜索界面
const btn = document.querySelector(".btn");
rSearchCont.addEventListener("click", function (e) {
  const target = e.target;
  input.value = target.innerHTML;
  btn.click();
});

//删除最近搜索记录
delSearchResult.addEventListener("click", function () {
  recentSearch.remove();
  window.localStorage.removeItem("arrSearch");
});

//用户点击搜索按钮
btn.addEventListener("click", function (e) {
  e.preventDefault();
  keyupFn();
  const inpVal = input.value;
  if (inpVal.trim().length < 1) {
    alert("搜索值不正确~");
    input.focus();
    input.value = "";
    return;
  }
  arrSearchVal.push(inpVal);
  localStorage.setItem("arrSearch", JSON.stringify(arrSearchVal));
  location.href = `list.html?goodsName=${inpVal}`;
  input.value = "";
});

//获取搜索商品参数
function getGoodMsg(val, str) {
  if (val.length < 1) {
    ul.innerHTML = "";
    return;
  } else {
    axios
      .get("http://cba.itlike.com/public/index.php?s=/api/goods/list", {
        params: { goodsName: val },
      })
      .then(({ data: dataNew }) => {
        if (dataNew.status == 200) {
          const {
            data: {
              list: { data },
            },
          } = dataNew;
          if (data.length > 0) {
            p.style.display = "none";
            ul.style.display = "block";
            data.forEach((item) => {
              const { goods_name, goods_id } = item;
              str += `
                <li>
                  <a href="list.html?goodsName=${goods_name}">${goods_name}</a>
                </li>
              `;
            });
            ul.innerHTML = str;
          } else {
            p.style.display = "block";
            ul.style.display = "none";
          }
        }
      });
  }
}
